<template>
	<view class="order_box pr" :class="isShowPopup? 'popup-show': ''">
		<view class="tabbarOrder pf">
			<v-tabs :list="tab" :current="active" @change="change_status" active-color="#000" bg-color="#f8f8fb"
				gutter=25 :index=index :position="position">
			</v-tabs>
		</view>
		<view class="order" id="orderDetail" @touchstart="touchStart($event)" @touchmove="touchMove($event)"
			@touchend="touchEnd($event)">
			<refresh :freshFlag="freshFlag" :loadMsg="loadMsg" v-if="order.length"></refresh>
			<order-card :order="order" :showBtn="showBtn" :pay="pay" :isCoupons="isCoupons" @cancel="cancel"
				@ShowPopup="ShowPopup" @receive="receive"></order-card>
			<empty :null_data="null_data" v-if="order.length == 0"></empty>
			<view class="getMore" @click="getMore" style="padding: 50rpx;" v-if="order.length > 4">
				<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName" ref="touchBottom"></touch-bottom>
			</view>
		</view>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tapStatus: true, // tap 打开
				isShowPopup: false, // 禁止滚动
				null_data: {
					null_img: this.imgUrl + 'noorder.png',
					text: '暂无订单~'
				},
				isName: false,
				isLoad: false,
				isNone: false,
				order: [],
				isCoupons: false,
				pay: "应付",
				showBtn: true,
				active: 0,
				tab: [{
						id: 0,
						name: "全部",
					},
					{
						id: 1,
						name: "待支付",
					}, {
						id: 2,
						name: "已支付",
					},
					{
						id: 3,
						name: "已发货",
					}, {
						id: 4,
						name: "已签收",
					}, {
						id: 5,
						name: "已取消",
					}, {
						id: 6,
						name: "已完成",
					},
				],
				orderTop: '',
				obj: {
					"page": 1,
					"pagesize": 10,
					"member_id": 1,
					"status": '',
				},
				totalPages: null, // 总页面
				top: 0,
				startY: 0, // 保存 y轴点的位置
				touching: false, // 代表当前是否处于 下拉刷新行为的开关，也就是当属于滚动行为时，就要退出该事件机制
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				refreshType: false,
				loadMsg: '',
				freshFlag: false,
				count: 0,
				hight: 0,
				show_top: false, // 回到顶部按钮显示
			};
		},
		onReachBottom() {
			if (this.totalPages > this.obj.page) {
				this.getMore();
			} else {
				this.isLoad = false;
				this.isNone = true;
				this.isName = true;
			}
		},
		mounted() {
			this.load();
		},
		onLoad() {
			this.orderType = 'orderDetail'
			this.$store.dispatch('order/get_orderBtn', this.orderType)
			// 获取元素高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#orderDetail').boundingClientRect(data => {
				this.orderTop = data.top + data.height
			}).exec();
		},
		watch: {
			/**
			 * 监听active的变化， 根据active的变化进行传参
			 * @param {Object} newVal
			 * @param {Object} oldVal
			 */
			active(newVal, oldVal) {
				if (newVal != oldVal) {
					this.obj.page = 1;
					this.order = [];
					if (newVal >= 1) {
						this.obj.status = newVal - 1;
					} else {
						this.obj.status = '';
					}
					this.load();
				}
			},
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			}
		},
		methods: {
			// 当页面滚动时触发;
			onPageScroll(res) {
			    // 获取当前页面滚动高度；
				this.hight = res.scrollTop;
			},
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= 20) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(() => {
						this.freshFlag = false;
					}, 500)
				}, 2000);
			},
			// 禁止滚动
			ShowPopup() {
				this.tapStatus = false;
				this.isShowPopup = true;
			},
			// 获取初始信息
			load() {
				this.$api('orderpage', this.obj).then(res => {
					let order = res.data.data;
					this.order = order;
					this.amendType();
					this.totalPages = res.data.totalPages;
					if (this.order.length < this.obj.pagesize) {
						this.isName = true;
						this.isNone = true;
					}
					this.$store.dispatch('order/get_myorder', this.order)
				})
			},
			// 加载更多
			getMore() {
				this.isNone = true;
				this.isLoad = true;
				this.isName = false;
				this.obj.page++;
				this.$api('orderpage', this.obj).then(res => {
					this.order = [...this.order, ...res.data.data];
					this.totalPages = res.data.totalPages;
					this.amendType();
					this.$store.dispatch('order/get_myorder', this.order);
				})
			},
			// 修改订单状态
			amendType() {
				this.order.forEach((item, index) => {
					if (item.status == 0) {
						item.type = '待支付'
					}
					if (item.status == 1) {
						item.type = '已支付'
					}
					if (item.status == 2) {
						item.type = '已发货'
					}
					if (item.status == 3) {
						item.type = '已签收'
					}
					if (item.status == 4) {
						item.type = '已取消'
					}
					if (item.status == 5) {
						item.type = '已完成'
					}
				})
			},
			// 获取第一个分类的名称，以及下标
			change_status(index) {
				if (this.tapStatus) {
					this.active = index
				}
			},
			fun(express, active) {
				var arr = []
				express.forEach((item, index) => {
					if (active == 0) {
						arr.push(item)
					} else if (item.status == 0 && active == 1) {
						arr.push(item)
					} else if (item.status == 1 && active == 2) {
						arr.push(item)
					} else if (item.status == 2 && active == 3) {
						arr.push(item)
					} else if (item.status == 3 && active == 4) {
						arr.push(item)
					} else if (item.status == 4 && active == 5) {
						arr.push(item)
					} else if (item.status == 5 && active == 6) {
						arr.push(item)
					}
					if (item.status == 0) {
						item.type = '待支付'
					}
					if (item.status == 1) {
						item.type = '已支付'
					}
					if (item.status == 2) {
						item.type = '已发货'
					}
					if (item.status == 3) {
						item.type = '已签收'
					}
					if (item.status == 4) {
						item.type = '已取消'
					}
					if (item.status == 5) {
						item.type = '已完成'
					}
				});
				return arr
			},
			// 取消临时订单
			cancel(order_no, index) {
				let obj = {
					order_no
				}
				this.$store.dispatch('order/get_cancel', obj).then(res => {
					// 状态修改为已取消
					this.order[index].status = 4;
					this.order[index].type = '已取消';
				})
			},
			// 确认订单
			receive(order_no, index) {
				let obj = {
					order_no
				}
				this.$store.dispatch('order/get_receive', obj).then(res => {
					// 状态修改为已签收
					this.order[index].status = 3;
					this.order[index].type = '已签收';
				})
			}
		},

	}
</script>
<style scoped lang="scss">
	@import './index.scss';

	.order_box {}
</style>
